<template>
  <div class="promote-container">
    <div class="wxBaseView" v-if="isWeixin==true">
      <img class="wxTip" src="@/assets/wxTip.png"/>
    </div>
    <div class="otherBaseView">
      <img class="promote-logo" :src="appInfo.logoUrl"/>
      <!-- <span class="promote-codeInfo">生产环境 1.0.1</span> -->
      <span class="promote-appName">{{appInfo.promoteName}}</span>
      <span class="promote-slogan">{{appInfo.promoteDesc}}</span>
      <span class="promote-details" v-html="appInfo.promoteIntroduction"></span>

      <el-button class="promote-download" type="primary" @click="downloadClick">下载App</el-button>
    </div>
  </div>
</template>

<script>
  import { getPromoteInfo } from '@/api/main'
  import defaultLogo from '@/assets/logo.png'
  import {Message} from 'element-ui'

  export default {
    name: 'Promote',
    data() {
      return {
        // AppKey
        appkey: this.$route.query.appkey,
        // App详情
        appInfo: {},
        // 是否微信浏览器
        isWeixin: this.checkIsWeixin()
      }
    },
    created(){
      this.getAppInfo()
    },
    methods: {
      // 获取App信息
      getAppInfo() {
        getPromoteInfo(this.appkey).then(response => {
            const data = response.data
            console.log('App信息', data)
            this.appInfo = data.repData
            if(this.appInfo.logoUrl == null) {
              this.appInfo.logoUrl = defaultLogo
            }
          }).catch(error => {

          })
      },
      //判断是否是微信浏览器的函数
      checkIsWeixin(){
        //window.navigator.userAgent属性包含了浏览器类型、版本、操作系统类型、浏览器引擎类型等信息，这个属性可以用来判断浏览器类型
        var ua = window.navigator.userAgent.toLowerCase();
        // alert(JSON.stringify(ua))
        //通过正则表达式匹配ua中是否含有MicroMessenger字符串
        if(ua.match(/MicroMessenger/i) == 'micromessenger'){
          return true;
        } else{
          return false;
        }
      },
      // 下载App
      downloadClick() {
        var u = navigator.userAgent, app = navigator.appVersion;
        var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
        var isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        console.log(window.navigator.userAgent);
        if (isAndroid) {
          if(this.appInfo.androidUrl) {
            window.location.href = this.appInfo.androidUrl
          }else {
            Message({
              message: '未发现可下载的安卓版本',
              type: 'warning',
              duration: 1000
            });
          }
        }
        if (isIOS) {
          console.log('123', this.appInfo.iosurl)
          if(this.appInfo.iosurl) {
            window.location.href = this.appInfo.iosurl
          }else {
            Message({
              message: '未发现可下载的iOS版本',
              type: 'warning',
              duration: 1000
            });
          }
        }
        setTimeout(function () {
          if (/MicroMessenger/.test(window.navigator.userAgent)) {
            $.jy.pop_tip({ display: 'show', msg: '如无法正常下载，请点击右上角在默认浏览器中打开' });
            window.location.href = 'https://www.anji-datahome.com/upgrade/lsd_android.apk'
            // alert('微信客户端');
          } else if (/AlipayClient/.test(window.navigator.userAgent)) {
            // alert('支付宝客户端');
          } else {
            // alert('其他浏览器');
          }
        }, 200)
      },
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
  @import "../../styles/common.css";

  .promote {
      &-container {
        width: 100%;
        height: 100%;
      }
      &-logo {
        width: 40%;
        object-fit: contain;
        border-radius: 10px;
      }
      &-download {
          width: 50vw;
          height: 10vw;
          margin-top: 20px;
      }
      @media screen and (min-width: 900px) { 
        &-logo {
          width: 10%;
          object-fit: contain;
        }
        &-download {
          width: 40vh;
          height: 8vh;
          margin-top: 20px;
      }
      } 
      /* css注释：设置了浏览器宽度不小于1201px时 abc 显示1200px宽度 */ 
      &-codeInfo {
          width: 100%;
          color: #535353;
          font-size: 14px;
          text-align: center;
      }
      &-appName {
          margin-top: 20px;
          color: #535353;
          font-size: 26px;
          font-weight: bold;
          text-align: center;
      }
      &-slogan {
          margin: 10px;
          color: #8f8f8f;
          font-size: 12px;
          text-align: center;
      }
      &-details {
          margin-top: 20px;
          color: #8f8f8f;
          font-size: 12px;
          line-height: 18px;
          white-space: pre-wrap;
      }
  }

  .wxBaseView {
    position: absolute;
    width: 100%;
    height: 100%;
    padding: 30px;
    background-color: rgba(0,0,0,0.8);;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }
  .wxTip {
    width: 30vw;
    object-fit: contain;
  }
  .otherBaseView {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    padding: 20px;
    align-items: center;
    justify-content: flex-start;
  }
</style>
